<template>
  <div class="container">
    <navigate>
      线下预约
      <template v-slot:right>
        <div class="red_dot" v-if="false"></div>
        <!-- <img
          @click="$router.push('/appointmentRecord')"
          class="message"
          src="@/assets/images/consult/message.png"
          alt=""
        /> -->
      </template>
    </navigate>
    <time-date @getDate="getOfflineList" />

    <div class="title flex_row flex_align_center">
      <div class="circle"></div>
      <span>
        {{ convertMonthDay(currentDate) }}
      </span>
    </div>

    <div
      class="card item flex_row father_relative"
      v-for="(item, index) in consultList"
      :key="index"
    >
      <div class="item_left">
        <img :src="joinUrlImg(item.avatar)" alt="" />
        <!-- <div class="count">预约{{ "123" }}次</div> -->
      </div>
      <div class="item_right flex_column between">
        <div class="name_stauts flex_row flex_align_center between">
          <div class="name">{{ item.name }}({{ item.age }})</div>
          <!-- <div class="status">{{ "在线中" }}</div> -->
        </div>
        <div class="sex">性别:{{ item.sex == 1 ? "男" : "女" }}</div>
        <div class="department flex_row">
          <div>负责部门：</div>
          <div>{{ item.responsible_department }}</div>
        </div>
        <div class="label flex_row flex_align_center">
          <div class="text nowrap">标签:</div>
          <div class="label_icon flex_row flex_align_center">
            <img
              v-for="(e, i) in item.userTag"
              :key="i"
              :src="joinUrlImg(e.tag_icon)"
              alt=""
              class="tag_img"
            />
          </div>
        </div>

        <button
          class="btn vertical_center nowrap flex_row flex_center_jc flex_align_center"
          @click="launch(item)"
        >
          线下预约
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import {
  convertYearMonthDay,
  convertMonthDay,
  getTimestamp,
} from "@/utils/time.js";
import { queryOfflineList } from "@/api/consultation/offline.js";
import timeDate from "./components/timeDate.vue";
import { joinUrlImg } from "@/utils/setUrlImg";
export default {
  components: {
    timeDate,
  },
  data() {
    return {
      // 当前日期
      currentDate: "",
      page: 1,
      pageSize: 10,
      consultList: [],
    };
  },
  created() {},
  methods: {
    joinUrlImg,
    convertYearMonthDay,
    convertMonthDay,
    async getOfflineList(val) {
      this.currentDate = val;
      const params = {
        date: convertYearMonthDay(this.currentDate),
      };
      let res = await queryOfflineList(params);
      if (res.code == 200) {
        this.consultList = res.data;
      }
    },
    // 发起线下预约
    launch(item) {
      let time = getTimestamp(this.currentDate) / 1000;
      this.$router.push(`/launch2?id=${item.id}&date=${time}`);
    },
  },
};
</script>
<style lang="less" scoped>
@import "./css/index.less";
</style>
